import React from 'react';
import _ from 'lodash';
import { Statistic, Icon, Row, Col } from 'antd';

export default class DifferenceDisplayer extends React.PureComponent {
  render() {
    const { cellData, precision } = this.props;
    const { value, percentage } = cellData;
    let val1;
    let val2;
    let color;
    let prefix;
    let symbol;
    if (value > 0) {
      val1 = value;
      color = 'rgba(255, 0, 25, 1)';
      symbol = '+';
    } else if (value < 0) {
      val1 = value * -1;
      color = 'rgba(67, 207, 124, 1)';
      symbol = '-';
    } else if (value === 0 || value === '-0') {
      color = 'rgba(255, 141, 26, 1)';
      val1 = 0;
    } else if (_.isNaN(value)) {
      val1 = null;
      color = 'rgba(0, 0, 0, 0.65)';
    }

    if (percentage > 0) {
      val2 = percentage;
      prefix = <Icon type="arrow-up" />;
    } else if (percentage < 0) {
      val2 = percentage * -1;
      prefix = <Icon type="arrow-down" />;
    } else if (percentage === 0 || percentage === '-0') {
      val2 = 0;
    } else if (_.isNaN(percentage)) {
      val2 = null;
    }

    return (
      <Row type="flex" justify="space-around" style={{ width: '100%', height: '100%' }}>
        <Col span={11}>
          {val1 === null ? (
            <Statistic
              formatter={() => '—'}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
            />
          ) : (
            <Statistic
              prefix={symbol}
              value={val1.toFixed(precision)}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
            />
          )}
        </Col>
        <Col span={2}>
          <div style={{ width: '1px', height: '100%', background: '#eee' }}></div>
        </Col>
        <Col span={11}>
          {val2 === null ? (
            <Statistic
              formatter={() => '—'}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
            />
          ) : (
            <Statistic
              value={val2.toFixed(2)}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
              prefix={prefix}
              suffix="%"
            />
          )}
        </Col>
      </Row>
    );
  }
}
